<template>
  <div class="home">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
  <div class="van2-test">
    <span style="font-size:20px">test{{active}}{{msg}}</span><br>
    <span class="abc">test{{active}}{{msg}}</span>
  </div>
  <el-row>
    <el-button>默认按钮</el-button>
    <el-button type="primary" @click="onGoto">主要按钮</el-button>
    <el-button type="success" @click="onGetData">请求接口</el-button>
    <el-button type="info" @click="onTest">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
  </el-row>

</template>

<script lang="ts">
  import {defineComponent, reactive, toRefs, onMounted} from "vue";
  import HelloWorld from "@/components/HelloWorld.vue";
  import Qcon from "@/controller/qController";
  import util from "@/utils/util";
  import {ElMessage} from "element-plus";


  export default defineComponent({
    name: 'home',
    components: {
      HelloWorld
    },
    setup() {
      const state = reactive({
        active: 1230,
        msg: `这是内容`
      });

      const onTest = () => {
        util.showMessage('操作成功','error');
      };
      const onGoto = () => {
        util.gotoWin('about', 2)
      }
      const onGetData = async () => {
        let json = { };
        const result = await Qcon.get_data_test(json);

        const { code, results, message } = result;
        if (Number(code) == 200) {
          ElMessage.success('获取成功')
          console.log(results)
        } else {
          ElMessage(message);
        }
      }

      //生命周期函数
      onMounted(()=>{
        onTest();
      });
      return {
        ...toRefs(state),
        onTest,
        onGoto,
        onGetData
      };


    }
  });
</script>

<style lang="scss">
  .van2-test {
    border: 1px solid #ff0000;
    width: 500px;
    height: 400px;
    font-size: 14px;
  }
  .abc{
    font-size:20px;
  }
</style>
